fix(detail): stabilize image-area height to stop the per-switch layout jump (CLS)#533
Merged
Conversation
…ayout jump The detail image area used `sm:max-h-[90vh]`, so it sized to each photo's contained height — switching between photos of different aspect ratios changed the row height every time, and the whole modal jumped/reflowed (measured CLS ~0.06; the remaining "flicker" on switch/load after the other fixes). Make the image area a fixed `sm:h-[90vh]` box on desktop (carousel viewport and slides fill it with `sm:h-full`); the image keeps `object-contain` and is centered, so different aspect ratios now letterbox within a constant-height box instead of resizing it. Height no longer changes on switch → CLS ≈ 0, no jump. Mobile is unchanged (no `sm:` height → still sizes to content). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Symptom
After the histogram/zoom flicker fixes deployed, the detail view still visibly "flickered" / jumped on switch and load (Manjusaka, real device). Profiling pinned the residual cause: image-area CLS ~0.06 — the whole modal reflows on each switch.
Cause
The image area used
sm:max-h-[90vh](a max), so it sized to each photo's contained height. Switching between photos of different aspect ratios changed the row height every time → the modal jumped/reflowed.Fix
Make the image area a fixed
sm:h-[90vh]box on desktop; the carousel viewport and slides fill it (sm:h-full), and the image keepsobject-containcentered. Different aspect ratios now letterbox within a constant-height box instead of resizing it → height no longer changes on switch → CLS ≈ 0, no jump.sm:height → still sizes to content).Verification
tscclean. Can't measure CLS headless on the modal path reliably; post-deploy: re-profile to confirm CLS → ~0 and Manjusaka confirms the switch/load jump is gone. Known secondary (deferred): theMotionImage1s fade-in could be shortened if a "soft" fade still reads as flicker after this; and the ~313-mutation full re-render per switch (memoize slides/strip) remains a perf follow-up.